<template>
  <div class="page4" v-loading="loading">
    <div class="page-title">码号收入和台阶收入</div>
    <div class="page-content">
      <div class="page-left">
        <div class="left-top">
          <strong class="head">码号收入：</strong>
          <ul>
            <li>
              <strong class="red">总体情况：</strong>
              <span>1-{{month}}月{{area_name}}码号收入同比增长{{mh_tbIncrease}}%，累计进度{{mh_progress}}%</span>
            </li>
            <li>
              <span>地市差距拉大，同比增长前三：
                <strong class="blue">{{topTbYearInrease}}</strong>；后三：
                <strong class="red">{{endTbYearInrease}}</strong>；预算进度前三：
                <strong class="blue">{{topCompleteYearBudget}}</strong>；后三：
                <strong class="red">{{endCompleteYearBudget}}</strong>；{{lowerThanLastYear}}个地市本年进度低于上年
              </span>
            </li>
          </ul>
        </div>
        <div class="left-bottom">
          <strong class="head">台阶收入：</strong>
          <ul>
            <li>三季度台阶收入环比上年四季度增长{{tj_increase}}%</li>
            <li>
              <span>增长率前三分公司：</span>
              <strong class="blue">{{topOneGrowthRate}}</strong>；后三分公司：
              <strong class="red">{{endOneGrowthRate}}</strong>，最高与最低之间增长率相差{{tj_difference}}pp
            </li>
          </ul>
        </div>
      </div>
      <div class="page-right">
        <div class="right-top">
          <div class="mh-table-top">
            <div class="mhsr">
              <div>码号</div>
              <div>收入</div>
            </div>
            <BarChart :chartData="codeList" class="barchart"></BarChart>
          </div>
          <div class="mh-table-bottom">
            <el-table 
              :data="mhTableData"
              style="width: 100%" 
              :show-header="false" 
              border
              ref="table"
            >
              <el-table-column prop="title" width="76" align="center"></el-table-column>
              <el-table-column v-for="i in lastCodeList.length" :key="i" :prop="'value'+i" min-width="50" align="center">
                <template v-slot="{ row }">
                  <span style="color: red" v-if="row['value'+i] < 0">{{ row['value'+i] }}%</span>
                  <span v-else>{{ row['value'+i] }}%</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="right-bottom">
          <div class="tjsr">
            <div>台阶</div>
            <div>收入</div>
          </div>
          <div class="tj-table">
            <el-table 
              :data="stepTable"
              style="width: 100%"
              :border="false"
              :header-cell-style="headerCellStyle"
            >
              <el-table-column prop="areaName" width="76" align="center">
                <template v-slot="{ row }">
                  <span :style="{ fontWeight: row.areaId == 1 ? '600' : 'normal' }">{{ row.areaName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="环比上年四季度" align="center">
                <el-table-column label="增长额(万元)" prop="oweGrowth" align="center"></el-table-column>
                <el-table-column label="增长率(%)" prop="oneGrowthRate" align="center">
                  <template v-slot="{ row }">
                    <span v-if="row.oneSort >= stepTable.length - 3 && row.oneSort <= stepTable.length - 1" style="color: red">
                      {{ row.oneGrowthRate }}
                    </span>
                    <span v-else-if="row.oneSort >= 1 && row.oneSort <= 3" style="color: blue">
                      {{ row.oneGrowthRate }}
                    </span>
                    <span v-else-if="row.areaId == 1" style="color: blue;font-style: oblique;fontWeight: 600">
                      {{ row.oneGrowthRate }}
                    </span>
                    <span v-else>{{ row.oneGrowthRate }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="排名" prop="oneSort" align="center">
                  <template v-slot="{ row }">
                    <span v-if="row.oneSort >= stepTable.length - 3 && row.oneSort <= stepTable.length - 1" style="color: red">
                      {{ row.oneSort }}
                    </span>
                    <span v-else-if="row.oneSort >= 1 && row.oneSort <= 3" style="color: blue">
                      {{ row.oneSort }}
                    </span>
                    <span v-else-if="row.areaId == 1" style="color: blue;font-style: oblique;fontWeight: 600">
                      -
                    </span>
                    <span v-else>{{ row.oneSort }}</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="环比本年上季度" align="center">
                <el-table-column label="增长额(万元)" prop="twoGrowth" align="center"></el-table-column>
                <el-table-column label="增长率(%)" prop="twoGrowthRate" align="center">
                  <template v-slot="{ row }">
                    <span v-if="row.twoGrowth >= stepTable.length - 3 && row.twoGrowth <= stepTable.length - 1" style="color: red">
                      {{ row.twoGrowthRate }}
                    </span>
                    <span v-else-if="row.twoGrowth >= 1 && row.twoGrowth <= 3" style="color: blue">
                      {{ row.twoGrowthRate }}
                    </span>
                    <span v-else-if="row.areaId == 1" style="color: blue;font-style: oblique;fontWeight: 600">
                      {{ row.twoGrowthRate }}
                    </span>
                    <span v-else>{{ row.twoGrowthRate }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="排名" prop="twoSort" align="center">
                  <template v-slot="{ row }">
                    <span v-if="row.twoSort >= stepTable.length - 3 && row.twoSort <= stepTable.length - 1" style="color: red">
                      {{ row.twoSort }}
                    </span>
                    <span v-else-if="row.twoSort >= 1 && row.twoSort <= 3" style="color: blue">
                      {{ row.twoSort }}
                    </span>
                    <span v-else-if="row.areaId == 1" style="color: blue;font-style: oblique;fontWeight: 600">
                      -
                    </span>
                    <span v-else>{{ row.twoSort }}</span>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>            
          </div>

        </div>
      </div>      
    </div>
  </div>
</template>
<script>
import { $budgetAPI } from "@/api";
import { toChinesNum } from "@/utils/common.js";
export default {
  components: {
    BarChart: () => import("./charts/page4Chart.vue"),
  },
  props: {
    form: {
      type: Object,
      default: () => ({})
    },
    areaName: {
      type: String,
      default: ""
    }
  },  
  data(){
    return {
      loading: false,

      /* 码号收入 */
      topTbYearInrease: "",//同比增长前三
      endTbYearInrease: "",//同比增长后三
      topCompleteYearBudget: "",//预算进度前三
      endCompleteYearBudget: "",//预算进度后三
      mh_tbIncrease: "",//同比增长
      mh_progress: "",//累计进度
      lowerThanLastYear: "",//进的低于上年的数量

      /* 台阶收入 */
      topOneGrowthRate: "", //增长率前三
      endOneGrowthRate: "", // 增长率后三
      tj_increase: "", //增长
      tj_difference: 0, //相差

      codeList: [],
      mhTableData: [],
      lastCodeList: [],

      stepTable: [],

      headerCellStyle: {
        backgroundColor: 'transparent',
        color: '#000',
        fontWeight: '500',
        fontSize: '16',
        padding: '5px 0',
      },

      area_name: "",
      month: "",
    }
  },
  created(){
    
  },
  methods: {
    getData(){
      this.loading = true;
      let acctMonth = this.form.month,
          token = this.form.token,
          areaId = this.form.areaId,
          areaName = this.areaName;
      $budgetAPI.getCountyOperationPageFour(
        { token, areaId, acctMonth },
        res => {
          if(res.code == 0){
            const { codeList, difference, endCompleteYearBudget, 
                    endTbYearInrease, lastCodeList, topCompleteYearBudget, 
                    topTbYearInrease, topOneGrowthRate, endOneGrowthRate, stepTable,
                    jdc
                  } = res.content;
            this.topTbYearInrease = topTbYearInrease && topTbYearInrease.join("、");
            this.endTbYearInrease = endTbYearInrease.join("、");
            this.topCompleteYearBudget = topCompleteYearBudget.join("、");
            this.endCompleteYearBudget = endCompleteYearBudget.join("、");
            this.codeList = codeList;

            this.topOneGrowthRate = topOneGrowthRate.join("、");
            this.endOneGrowthRate = endOneGrowthRate.join("、");
            this.stepTable = stepTable;

            let mh = codeList.find(it => it.displayName === '浙江') || codeList[0];
            this.mh_tbIncrease = mh.tbYearInrease;
            this.mh_progress = mh.completeYearBudget;
            
            this.tj_increase = stepTable[0].oneGrowthRate;
            this.tj_difference = difference;

            this.lastCodeList = lastCodeList;

            this.mhTableData = [];
            let obj1 = {title: '上年同期累计进度'},obj2 = {title: '进度差(本年-上年)'},
                _lowerThanLastYear = 0;
            for(let i = 0; i < lastCodeList.length; i++){
              obj1["value"+(i+1)] = lastCodeList[i].completeYearBudget;
              obj2["value"+(i+1)] = jdc[i].completeYearBudget;
              if(lastCodeList[i].displayName !== "浙江" && difference[i] < 0)
                _lowerThanLastYear++;
              }
            this.mhTableData.push(obj1, obj2);
            this.lowerThanLastYear = toChinesNum(_lowerThanLastYear);

            this.month = +this.form.month.slice(4, 6);
            this.area_name = areaName;
          }
          this.loading = false;
          this.$nextTick(() => {
            this.$refs.table.doLayout();
          })
        },
        err => {
          console.log(err);
          this.loading = false;
        }
      )
    }
  },
}
</script>
<style lang="scss" scoped>
.page4 {
  padding: 20px;
  border: 1px solid #dee5f3;
  border-radius: 5px;
  margin-top: 20px;
  .page-title {
    text-align: center;
    font-size: 24px;
    font-weight: 900;
  }
  .page-content {
    overflow: hidden;
    margin-top: 20px;
  }
  .page-left {
    width: 380px;
    float: left;
    padding: 0 20px 0 10px;
    .head {
      position: relative;
      padding-left: 16px;
      &::before {
        content: "";
        position: absolute;
        width: 7px;
        height: 7px;
        border: 2px solid red;
        left: -10px;
        top: 4px;
      }
    }
    strong {
      font-weight: 900;
    }
    li {
      padding-left: 16px;
      line-height: 32px;
      position: relative;
      &::before {
        content: "";
        position: absolute;
        width: 5px;
        height: 5px;
        background-color: red;
        border-radius: 100%;
        left: -8px;
        top: 15px;
      }
    }
    .left-top, .left-bottom {
      font-size: 15px;
      .red {
        color: red;
      }
      .blue {
        color: blue;
      }
    }
    .left-bottom {
      margin-top: 200px;
    }
  }
  .page-right {
    width: calc(100% - 380px);
    float: right;
    .right-top {
      width: 100%;
      border: 1px solid rgb(153, 153, 153);
      border-radius: 10px;
      .mh-table-top {
        height: 250px;
        display: flex;
        align-items: flex-end;
        .mhsr{
          width: 60px;
          height: 60px;
          line-height: 30px;
          font-size: 20px;
          text-align: center;
          background-color: red;
          color: #fff;
          margin-left: 20px;
        }
        .barchart {
          flex: 1;
          height: 100%;
        }
      }
      .mh-table-bottom {
        width: 100%;
        padding: 10px;
      }
    }
    .right-bottom {
      width: 100%;
      border: 1px solid rgb(153, 153, 153);
      border-radius: 10px;
      overflow: hidden;
      padding: 10px 20px;
      .tjsr{
        float: left;
        width: 60px;
        height: 60px;
        line-height: 30px;
        font-size: 20px;
        text-align: center;
        background-color: red;
        color: #fff;
        margin-top: 140px;
      }
      .tj-table {
        width: calc(100% - 80px);
        float: right;
        margin-left: 20px;
      }
    }
  }
}
/deep/ .el-table {
  .el-table__row {
    td {
      padding: 0 !important;
    }
    .cell {
      padding: 2px 0 !important;
      font-size: 12px !important;
    }
  }
}
</style>
